<template>
  <base-modal
    :title="$t('common.base.edit')"
    :show.sync="visible"
    width="500px"
    class="add-name"
  >
    <div class="add-name-content">
      <div class="task-font14"><span class="task-cef">*</span>{{$t('report.customReportAggregate.title6')}}</div>
      <el-input v-model="name" :placeholder="$t('common.placeholder.inputContent')" class="task-mtb13" :maxlength="10"></el-input>
      <div class="task-font14"><span class="task-cef">*</span>{{$t('report.customReportAggregate.title7')}}</div>
      <el-select v-model="reportKey" :placeholder="t('report.customReportAggregate.pla3')" class="task-mt8" style="width: 100%">
        <el-option
          v-for="(item,index) in groupingList"
          :key="index"
          :label="item.reportName"
          :value="item.reportKey">
        </el-option>
      </el-select>
      <div class="task-font14 mt10">{{$t('report.customReportAggregate.description')}}</div>
      <el-input type="textarea" :rows="2" v-model="textarea" :placeholder="$t('common.placeholder.inputContent')" class="task-mtb13" :maxlength="200"></el-input>
    </div>

    <!-- foot -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="onSubmit">{{ $t('common.base.makeSure') }}</el-button
      >
    </div>
  </base-modal>
</template>
<script>
import * as ManagementReport from '@src/api/ManagementReport'
export default {
  name: 'add-name',
  props: {
    reportName: {
      type: Object,
      default: () => ({})
    }// 默认值
  },
  data(){
    return {
      visible: false,
      name: '', // 报表名称
      textarea:'', // 报表说明
      reportKey: '', //
      groupingList: []
    }
  },
  watch:{
    reportName({name, textarea, reportKey}) {
      this.name = name
      this.textarea = textarea
      this.reportKey = reportKey
    }
  },
  methods: {
    // 显示
    show() {
      this.visible = true
      this.fetchGroupingNameList()
    },
    // 提交
    onSubmit() {
      const {name, textarea, reportKey} = this
      if(!name) return this.$platform.toast(this.$t('report.customReportAggregate.pla5'), 'error')
      if(!reportKey) return this.$platform.toast(this.$t('report.customReportAggregate.pla6'), 'error')
      this.$emit('onSubmit', {name, textarea, reportKey})
      this.visible = false
    },
    async fetchGroupingNameList() {
      const rs = await ManagementReport.getReportGroupList().catch(err => console.error('[fetch grooup error]', err))
      this.groupingList = rs.data
    }
  }
}
</script>
<style lang="scss" scoped>
.add-name-content {
    padding: 16px;
}
</style>
<style lang="scss">
.add-name-content {
  textarea {
    padding-left: 10px!important;
  }
}
</style>